<template>
  <div class="login-devices">
    <div class="section-header">
      <h4 class="section-title">
        <el-icon><Monitor /></el-icon>
        登录设备追踪
      </h4>
      <el-button
        v-if="deviceList.length > 1"
        :loading="logoutAllLoading"
        plain
        size="small"
        type="danger"
        @click="handleLogoutAll"
        >登出所有其他设备</el-button
      >
    </div>

    <div v-loading="loading" class="login-device-list">
      <el-empty v-if="!loading && deviceList.length === 0" :image-size="80" description="暂无登录设备记录" />

      <div v-if="deviceList.length > 0" class="device-table">
        <div class="device-header">
          <div class="header-cell device-name">设备名称</div>
          <div class="header-cell device-method">登录方式</div>
          <div class="header-cell device-location">登录城市</div>
          <div class="header-cell device-time">最后登录时间</div>
          <div class="header-cell device-actions"></div>
        </div>

        <DeviceCard
          v-for="device in deviceList"
          :key="device.id"
          :device="device"
          :logout-loading="logoutLoading[device.id]"
          @logout="handleLogout"
        />
      </div>
    </div>

    <div v-if="total > pageSize" class="pagination-wrapper">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 20]"
        :total="total"
        layout="total, sizes, prev, pager, next"
        small
        @current-change="loadDevices"
        @size-change="loadDevices"
      />
    </div>
  </div>
</template>

<script setup>
import { onMounted } from "vue"
import { Monitor } from "@element-plus/icons-vue"
import { useDevice } from "@/composables/business/useDevice"
import DeviceCard from "./deviceCard.vue"

const {
  loading,
  logoutAllLoading,
  logoutLoading,
  deleteLoading,
  deviceList,
  currentPage,
  pageSize,
  total,
  loadDevices,
  handleLogout,
  handleLogoutAll,
  handleDelete
} = useDevice()

onMounted(() => {
  loadDevices()
})
</script>

<style lang="scss" scoped>
@use "@/styles/base/variables" as *;

.login-devices {
  .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;

    .section-title {
      font-size: 1rem;
      font-weight: 600;
      color: $color-text-primary;
      margin: 0;
      display: flex;
      align-items: center;
      gap: 0.5rem;

      .el-icon {
        font-size: 1.1rem;
        color: $color-primary;
      }
    }
  }

  .login-device-list {
    min-height: 100px;

    .device-table {
      background: $bg-color-white;
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid $border-color-lighter;

      .device-header {
        display: flex;
        align-items: center;
        padding: 0.6rem 0.75rem;
        background: $bg-color-layout;
        border-bottom: 1px solid $border-color-lighter;

        .header-cell {
          padding: 0 0.5rem;
          font-size: 0.8rem;
          font-weight: 600;
          color: $color-text-secondary;

          &:first-child {
            padding-left: 0;
          }

          &.device-name {
            flex: 0 0 30%;
            min-width: 200px;
          }

          &.device-method {
            flex: 0 0 22%;
            min-width: 140px;
          }

          &.device-location {
            flex: 0 0 22%;
            min-width: 140px;
          }

          &.device-time {
            flex: 0 0 18%;
            min-width: 120px;
          }

          &.device-actions {
            flex: 0 0 8%;
            min-width: 80px;
          }
        }
      }
    }
  }

  .pagination-wrapper {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .login-devices {
    .section-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.75rem;
    }
  }
}
</style>
